<template>
	<view class="content">
		<u-search class="search" :placeholders="['猫猫','金毛','哈士奇']" placeholder="请输入宠物" v-model="keyword" :disabled="true" :show-action="false"></u-search>
		<!-- 轮播区域 -->
		<view class="wrap">
			<u-swiper :list="list" :effect3d="true"></u-swiper>
		</view>
		<!-- 菜单区域 -->
		<view class="menu">
			<view v-for="menu in menus">
				<image :src="menu.icon" :style="{width: menu.size.width+'px', height: menu.size.height+'px'}" />
				<view>{{menu.label}}</view>
			</view>
		</view>
		<!-- 消息通知区域 -->
		<view class="notice">
			<view class="sale-info">
				<image src="/static/cat_96.png" />
				<view>
					<view>金毛</view>
					<view>出价<span>￥1500</span></view>
				</view>
			</view>
			<view class="want-pay">
				99+人在线求购
			</view>
		</view>
		<!-- 每日特价 -->
		<view class="card">
			<view class="head">
				<view class="left-title">
					<image src="/static/heart.png" />
					<view>每日特价</view>
				</view>
				<view class="right-title">
					<view>更多</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="body">
				<petPanel :rightTip="{label: '特价'}" v-for="(item,key) in specialOffer" :key="key" :pet="item"></petPanel>
			</view>
		</view>
		<!-- 最新上架 -->
		<view class="card">
			<view class="head">
				<view class="left-title">
					<image src="/static/zxsj.png" />
					<view>最新上架</view>
				</view>
				<view class="right-title">
					<view>更多</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="body">
				<petPanel2 :rightTip="{label: ''}" v-for="(item,key) in zxPets" :key="key" :pet="item"></petPanel2>
			</view>
		</view>
		<!-- 精品宠物 -->
		<view class="card">
			<view class="head">
				<view class="left-title">
					<image src="/static/jpcw.png" />
					<view>精品宠物</view>
				</view>
				<view class="right-title">
					<view>更多</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="body warp">
				<petPanel2 class="pet" :rightTip="{label: '精品'}" v-for="(item,key) in jpPets" :key="key" :pet="item"></petPanel2>
			</view>
		</view>
		<view class="recommend">
			<view>为<span class="line">/</span>您<span class="line">/</span>推<span class="line">/</span>荐</view>
			<view class="body">
				<waterFallPanel v-for="shop in shops" :shop="shop" class="water"></waterFallPanel>
			</view>
		</view>

<!-- 		<mescroll-body class="mescroll" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption">
			
		</mescroll-body> -->
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import petPanel from '@/components/petPanel.vue'
	import petPanel2 from '@/components/petPanel2.vue'
	import waterFallPanel from '@/components/waterFallPanel.vue'
	export default {
		components:{petPanel,petPanel2,waterFallPanel},
		mixins: [MescrollMixin],
		data() {
			return {
				shops: [
					{
						pic: '/static/cat3.jpeg',
						title: '这是商',
						tipLabel: '大家都在关注',
						price: '329',
						oldPrice: '500',
						verify: true,
						verifyText: '平台保证',
						otherDesc: '100+评论',
					},
					
					{
						pic: '/static/dog2.jpeg',
						title: '这是商品这是',
						tipLabel: '大家都在关注',
						price: '329',
						oldPrice: '500',
						verify: true,
						verifyText: '平台保证',
						otherDesc: '100+评论',
					}
					,
					{
						pic: '/static/cat2.jpeg',
						title: '这是商品这是商品这是商品这是商品是商品这是商品这是商品是商品这是商品这是商品',
						tipLabel: '大家都在关注',
						price: '329',
						oldPrice: '500',
						verify: true,
						verifyText: '平台保证',
						otherDesc: '199+评论',
					},
				],
				specialOffer: [
					{
						pic: '/static/dog1.jpeg',
						name: '金吉拉',
						price: '2999',
						oldPrice: '5000',
						address: '贵阳 观山湖'
					},
					{
						pic: '/static/cat3.jpeg',
						name: '猫猫',
						price: '1200',
						oldPrice: '3000',
						address: '贵阳 花溪'
					},
					{
						pic: '/static/cat2.jpeg',
						name: '狸猫',
						price: '800',
						oldPrice: '1000',
						address: '贵阳'
					},
					{
						pic: '/static/dog2.jpeg',
						name: '哈士奇',
						price: '1000',
						oldPrice: '1500',
						address: '贵阳 云岩区'
					}
				],
				zxPets: [
					{
						pic: '/static/cat3.jpeg',
						firstLeftText: '金吉拉',
						secondLeftText: '￥2999',
						secondRightText: '刚刚'
					},
					{
						pic: '/static/cat2.jpeg',
						firstLeftText: '猫猫',
						secondLeftText: '￥1200',
						secondRightText: '10分钟前'
					},
					{
						pic: '/static/dog2.jpeg',
						firstLeftText: '狸猫',
						secondLeftText: '￥800',
						secondRightText: '12分钟前'
					},
					{
						pic: '/static/dog1.jpeg',
						firstLeftText: '哈士奇',
						secondLeftText: '￥1000',
						secondRightText: '15分钟前'
					}
				],
				jpPets: [
					{
						pic: '/static/dog2.jpeg',
						firstLeftText: '金吉拉',
						secondLeftText: '￥2999',
						secondRightText: '贵阳 观山湖'
					},
					{
						pic: '/static/cat2.jpeg',
						firstLeftText: '猫猫',
						secondLeftText: '￥1200',
						secondRightText: '贵阳 云岩区'
					},
					{
						pic: '/static/cat3.jpeg',
						firstLeftText: '狸猫',
						secondLeftText: '￥800',
						secondRightText: '贵阳 花溪'
					},
					{
						pic: '/static/cat2.jpeg',
						firstLeftText: '猫猫',
						secondLeftText: '￥1200',
						secondRightText: '贵阳 云岩区'
					},
					{
						pic: '/static/dog1.jpeg',
						firstLeftText: '狗狗',
						secondLeftText: '￥900',
						secondRightText: '贵阳 花溪'
					},
				],
				menus: [
					{
						icon: '/static/cat_96.png',
						label: '可爱猫',
						size: {
							width: 48,
							height: 48
						}
					},
					{
						icon: '/static/dog_96.png',
						label: '顽皮狗',
						size: {
							width: 48,
							height: 43
						}
					},
					{
						icon: '/static/fj_96.png',
						label: '附近',
						size: {
							width: 48,
							height: 48
						}
					},
					{
						icon: '/static/talk_98.png',
						label: '交流',
						size: {
							width: 48,
							height: 48
						}
					},
					{
						icon: '/static/feekback_96.png',
						label: '反馈',
						size: {
							width: 48,
							height: 49
						}
					}
				],
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				keyword: '',
				downOption: {
					native: true 
				},
				upOption: {
					noMoreSize: 4,
					empty: {
						tip: '~ 搜索无数据 ~',
						btnText: '去看看'
					}
				},
			}
		},
		onLoad() {

		},
		methods: {
			downCallback() {
				setTimeout(() => {
					this.mescroll.endSuccess(0,false);
				}, 1000)
				console.log('下拉刷新')
			},
			upCallback() {
				console.log('上拉加载')
				this.mescroll.endSuccess(0,false);

			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}
	.mescroll {
		width: 100vw;
	}
	.search {
		width: 90vw;
		margin-top: 20rpx;
	}
	.wrap {
			width: 100vw;
			margin-top: 20rpx;
			background-color: white;
			/deep/ swiper{
				background-color: white !important;
			}
		}
	.menu{
		display: flex;
		align-items: baseline;
		justify-content: flex-start;
		flex-wrap: wrap;
		width: 95vw;
		margin-top: 30rpx;
		>view{
			width: 20%;
			>image{
				display: block;
				margin: 0 auto;
				width: 32px;
				height: 35px;
			}
			>view{
				margin-top: 15rpx;
				text-align: center;
				font-size: 28rpx;
				color: #5a5b5f;
				font-weight: 550;
			}
		}
	}
	.notice{
		width: 100vw;
		border-top: 15rpx solid rgb(241,241,241);
		border-bottom: 15rpx solid rgb(241,241,241);
		padding: 25rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
		>.sale-info{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			>image{
				width: 48px;
				height: 48px;
				border-radius: 50%;
				margin-right: 10rpx;
			}
			>view{
				>view:nth-of-type(1){
					font-weight: 550;
				}
				>view{
					color: gray;
					>span{
						color: #f73d05;
					}
					>view:nth-of-type(1){
						margin-bottom: 10rpx;
					}
				}
			}
		}
		>.want-pay{
			border-radius: 25rpx;
			border: 5rpx solid #f73d05;
			color: #f73d05;
			padding: 8rpx 24rpx;
			font-size: 24rpx;
		}
	}
	
	
	.card{
		width: 100%;
		border-bottom: 15rpx solid rgb(241,241,241);
		>.head{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 25rpx;
			>.left-title{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				>image{
					width: 35rpx;
					height: 35rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}
				font-weight: 550;
				font-size: 32rpx;
			}
			>.right-title{
				font-size: 24rpx;
				color: #adadad;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}
		>.body{
			overflow-x: scroll;
			display: flex;
			align-items: baseline;
			justify-content: flex-start;
			flex-wrap: nowrap;
			padding-bottom: 20rpx;
		}
		>.warp{
			flex-wrap: wrap !important;
			overflow:hidden;
			/deep/ .pet:nth-of-type(n+4){
				margin-top: 15rpx;
			}
		}
		>.body::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
			display: none;
		}
	}

.recommend{
	width: 100vw;
	>view:nth-of-type(1){
		font-weight: 550;
		font-size: 36rpx;
		background-image: linear-gradient(to left, rgb(64, 224, 208), rgb(255, 140, 0), rgb(255, 0, 128));
		-webkit-background-clip:text;
		font-style: italic;
		color: transparent;
		text-align: center;
		padding: 20rpx;
		letter-spacing: 15rpx;
		>.line{
			font-size: 20rpx;
			line-height: 20rpx;
		}
	}
	>.body{
		padding: 20rpx 20rpx;
		background-color: rgb(241,241,241);
		columns: 2; // 默认列数
		column-gap: 20rpx; // 列间距
	}
}
</style>
